<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: white;

		padding: 30rpx 25rpx;
	}

	.list {

		border-bottom: 1px solid #ccc;
		align-items: flex-start;
		padding: 25rpx 0;

		.red {
			transform: translateY(6rpx);
		}

		.textarea {
			width: 550rpx;
			height: 120rpx;
			font-size: 28rpx;
		}

		.mic {
			height: 120rpx;
			width: 80rpx;
			border-left: 1px solid #ccc;
			padding-left: 20rpx;
		}

		.ipt,
		.picker {
			width: 550rpx;
			text-align: right;
		}

		.uploadfile {
			width: 550rpx;

			.btns {
				width: 100%;
				justify-content: flex-end;

				.btn {
					padding: 0 30rpx;
					height: 64rpx;
					opacity: 1;
					background: #fffefe;
					border: 2rpx solid #409eff;
					border-radius: 34rpx;
				}
			}
		}

		.record {
			width: 550rpx;
		}
	}

	.line2 {
		width: 100%;
		border-bottom: 1px solid #ccc;
		line-height: 80rpx;

		.line {
			width: 100%;

			.t2 {
				width: 60%;
			}
		}
	}
</style>

<template>
	<view class="content">
		<view class="f34 bold" style="padding:0 30rpx;border-bottom: 1px solid #ccc;padding-bottom: 20rpx;">开票</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				发票类型
			</view>
			<picker mode="selector" @change="chooseType" :range="receiptTypeArr" range-key="name">
				<view class="picker blue ">
					<view class="picker blue ">
						{{receiptTypeArr[receiptType].name}}
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</picker>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				发票编号
			</view>
			<textarea class="textarea" v-model="receiptNo" placeholder="请填写" />
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				开票金额（单位：元）
			</view>
			<input style="text-align: right;" @input="ipt" v-model="payprice" type="digit" placeholder="请输入" />
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				开票单位
			</view>
			<picker mode="selector" @change="chooseCompany" :range="companyArr" range-key="name">
				<view class="picker blue ">
					<view class="picker blue ">
						{{company?company.name:'请选择'}}
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</picker>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				开票人
			</view>
			<input style="text-align: right;" class="" v-model="receiptUser" type="text" placeholder="请输入" />
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				开票日期
			</view>
			<picker mode="date" @change="choosedate($event,1)">
				<view class="picker blue ">
					{{receiptDate}}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</picker>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				接收人
			</view>
			<view class="picker blue "  @click="$navTo(PagesCourseRouterConfig.ChoosePerson+'?type=2')">
				{{reveiveUser?reveiveUser.name:'请选择'}} <u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				接受日期
			</view>
			<picker mode="date" @change="choosedate($event,2)">
				<view class="picker blue ">
					{{receiveDate}}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</picker>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				备注
			</view>
			<textarea class="textarea" v-model="remarks" placeholder="请填写" />
		</view>

		<view class="list between-flex f28">
			<view class="align-flex">
				附件
			</view>
			<view class="uploadfile">
				<view class="btns align-flex m-bottom20">
					<view class="btn center-flex blue " @click="chooseImg" style="margin-right: 30rpx;">拍照</view>
					<view class="btn center-flex  blue" @click="uploadfile" >上传附件</view>
				</view>
				<view class="p-top10 between-flex" v-for="item,index in enclosure" :key="index">
					<view class="align-flex blue" @click="$open(item.url)">
						<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
						{{item.fileName.substring(item.fileName.length-10)}}
					</view>
					<u-icon @click="delfile(index)" name="close" color="#666666" size="30"></u-icon>
				</view>
			</view>
		</view>
		<view class="lbtn" @click="submit">提交</view>
	</view>
</template>

<script>
	import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
	export default {
		props: {
			info: {
				default: {}
			},
			contractId: {
				default: ''
			},
			companyId: {
				default: 0
			}
		},
		data() {
			return {
				PagesCourseRouterConfig,
				head: this.$head,
				receiptNo:'',
				companyArr: uni.getStorageSync('company'),
				company: null,
				receiptDate: '',
				receiveDate: '',
				payprice: '',
				receiptTypeArr: [{
						id: 1,
						name: '增值税专用发票'
					},
					{
						id: 2,
						name: '普通发票'
					},
					{
						id: 3,
						name: '专业发票'
					}
				],
				receiptType: 0,
				receiptUser: '', //开票人
				reveiveUser:null,//接收人
				remarks:'',
				enclosure:[],
			}
		},
		created() {
			this.getdate()
			this.getcompany()
			this.getUser()
			uni.$on('choosePerson',(data)=>{
				this.reveiveUser=data
			})
		},
		beforeDestroy() {
			uni.$off('choosePerson')
		},
		methods: {
			submit() {
				if(!this.receiptNo){
					this.$msg('请输入发票编号！')
					return
				}
				if(!this.payprice){
					this.$msg('请输入开票金额！')
					return
				}
				if(!this.receiptUser){
					this.$msg('请输入开票人！')
					return
				}
				var obj={
					contractId:this.contractId,
					receiptDate:this.receiptDate,
					companyId:this.company.id,
					receiptUser:this.receiptUser,
					receiptType:this.receiptTypeArr[this.receiptType].id,
					receiptNo:this.receiptNo,
					reveiveUserId:this.reveiveUser.value,
					receiptPrice:this.payprice,
					receiveDate:this.receiveDate,
					remarks:this.remarks
				}
				
					var enclosure = []
					this.enclosure.forEach(item => {
						enclosure.push({
							name: item.oldName,
							url: item.url
						})
					})
					obj['attachment'] = JSON.stringify(enclosure)
				console.log(obj)
				this.$showloading()
				this.$pop.ajaxPost('/contract/receipt/add',obj).then((res)=>{
					uni.hideLoading()
					if(res.code==0){
						this.$emit('submit')
					}else{
					this.$msg(res.msg)	
					}
				})
			},
			getUser(){
				var name= uni.getStorageSync('username')
				var list = uni.getStorageSync('user')
				for(var key in list){
					if(list[key]==name){
						this.reveiveUser={
							name,
							value:key
						}
					}
				}
				
				
			},
			
			getcompany() {
				var list = uni.getStorageSync('company')
				list.forEach(item => {
					if (item.id == this.companyId) {
						this.company = item
					}
				})
			},
			getdate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

				this.receiptDate = currentdate;
				this.receiveDate = currentdate;
			},
			ipt(e) {
				var price = e.detail.value
				if (price > (this.info.unpaidReceiptPrice)) {
					this.$msg('输入金额大于未开发票金额')
					this.payprice = ''
				}
			},
			choosedate(e,type) {
				if(type==1){
					this.receiptDate = e.detail.value
				}else{
					this.receiveDate = e.detail.value
				}
				
			},
			chooseType(e) {
				console.log(e)
				this.receiptType = e.detail.value

			},
			chooseCompany(e) {
				this.company = this.companyArr[e.detail.value]
			},
		
			delfile(index) {
				this.enclosure.splice(index, 1)
			},
			//选择图片
			async chooseImg() {
			
				var file = await this.$chooseImg()
			
				this.enclosure.push(file)
			
			},
			async uploadfile() {
			
				var file = await this.$uploadfile()
				this.enclosure.push(file)
			
			},


		}
	}
</script>
